AngularJS Modules

AngularJS মডিউল

AngularJS মডিউল

একটি AngularJS মডিউল একটি অ্যাপ্লিকেশন সংজ্ঞায়িত করে।

একটি মডিউল একটি অ্যাপ্লিকেশনের বিভিন্ন অংশের জন্য একটি ধারক।

একটি মডিউল হল অ্যাপ্লিকেশন কন্ট্রোলারের জন্য একটি ধারক।

কন্ট্রোলার সবসময় একটি ব্লকের অন্তর্গত।

একটি ব্লক তৈরি করা হচ্ছে

AngularJS ফাংশন angular.module ব্যবহার করে একটি মডিউল তৈরি করা হয়।

<div ng-app="myApp">...</div>

<script>

var app = angular.module("myApp", []);

</script>

"myApp" প্যারামিটার অ্যাপটি চালানোর একটি HTML উপাদান উপস্থাপন করে।

এখন আপনি আপনার AngularJS অ্যাপ্লিকেশনে কন্ট্রোলার, নির্দেশিকা, ফিল্টার এবং আরও অনেক কিছু যোগ করতে পারেন।

একটি নিয়ামক যোগ করা হচ্ছে

আপনার অ্যাপ্লিকেশনে একটি নিয়ামক যোগ করুন এবং এনজি-কন্ট্রোলার নির্দেশের সাথে নিয়ামকটি নির্দিষ্ট করুন:

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>

var app = angular.module("myApp", []);

app.controller("myCtrl", function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
});

</script>

শেখা:

আপনি এই টিউটোরিয়ালে পরে কন্ট্রোলার সম্পর্কে আরও শিখবেন।

নির্দেশের সংযোজন

AngularJS এর ​​অন্তর্নির্মিত নির্দেশাবলীর একটি সেট রয়েছে যা আপনি আপনার অ্যাপ্লিকেশনে কার্যকারিতা যোগ করতে ব্যবহার করতে পারেন।

একটি সম্পূর্ণ রেফারেন্সের জন্য, আমাদের AngularJS নির্দেশিক রেফারেন্স দেখুন।

অতিরিক্তভাবে, আপনি আপনার অ্যাপ্লিকেশনগুলিতে আপনার নিজস্ব নির্দেশাবলী যোগ করতে মডিউলটি ব্যবহার করতে পারেন:

<div ng-app="myApp" jassif-test-directive></div>

<script>
var app = angular.module("myApp", []);

app.directive("jassifTestDirective", function() {
  return {
    template : "I was made in a directive constructor!"
  };
});
</script>

শেখা:

আপনি এই টিউটোরিয়ালে পরে নির্দেশাবলী সম্পর্কে আরও শিখবেন।

ফাইলে মডিউল এবং কন্ট্রোলার

AngularJS অ্যাপ্লিকেশনগুলিতে জাভাস্ক্রিপ্ট ফাইলগুলিতে মডিউল এবং কন্ট্রোলার স্থাপন করা সাধারণ।

এই উদাহরণে, "myApp.js"-এ একটি অ্যাপ্লিকেশন মডিউল সংজ্ঞা রয়েছে, "myCtrl.js"-এ একটি নিয়ামক রয়েছে:

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

</body>
</html>

myApp.js

var app = angular.module("myApp", []);

মডিউল সংজ্ঞার [] প্যারামিটারটি নির্ভরশীল মডিউলগুলিকে সংজ্ঞায়িত করতে ব্যবহার করা যেতে পারে।

[] প্যারামিটার ছাড়া, আপনি একটি নতুন ব্লক তৈরি করছেন না, কিন্তু একটি বিদ্যমান ব্লক পুনরুদ্ধার করছেন।

myCtrl.js

app.controller("myCtrl", function($scope) {
  $scope.firstName = "John";
  $scope.lastName= "Doe";
});

ফাংশনগুলি বিশ্বব্যাপী নামস্থানকে দূষিত করতে পারে

জাভাস্ক্রিপ্টে গ্লোবাল ফাংশন এড়ানো উচিত।

এগুলি সহজেই অন্য স্ক্রিপ্ট দ্বারা ওভাররাইট বা ধ্বংস করা যেতে পারে।

AngularJS মডিউলগুলি মডিউলে সমস্ত কার্যকারিতা কনফিগারযোগ্য রেখে এই সমস্যাটি উপশম করে।

কখন লাইব্রেরি লোড করতে হবে

HTML অ্যাপ্লিকেশানগুলিতে <body> উপাদানের শেষে স্ক্রিপ্ট স্থাপন করা সাধারণ, তবে এটি AngularJS লাইব্রেরি <head> বা <body> এর শুরুতে লোড করার পরামর্শ দেওয়া হয়।

এর কারণ হল angular.module কলগুলি লাইব্রেরি লোড হওয়ার পরেই কম্পাইল করা যেতে পারে৷

<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.firstName = "John";
  $scope.lastName = "Doe";
});
</script>

</body>
</html>

গুরুত্বপূর্ণ নোট:

একটি ভাল অনুশীলন হল এইচটিএমএল ফাইলের শুরুতে অ্যাঙ্গুলারজেএস লাইব্রেরি লোড করা। এটি নিশ্চিত করে যে angular.module কল সঠিকভাবে কাজ করে।

কেন AngularJS মডিউল দরকারী? (একাধিক পছন্দ সম্ভাব্য)

তারা আবেদনের আয়োজন করে
✓ ঠিক আছে! মডিউল অ্যাপ্লিকেশন সংগঠিত সাহায্য
বিশ্বব্যাপী নামস্থান দূষণ হ্রাস করুন
✓ ঠিক আছে! মডিউল ফাংশন স্থানীয়করণ
তারা পৃষ্ঠার গতি কমিয়ে দেয়
✗ ভুল! ব্লক সরাসরি পৃষ্ঠার গতি কমায় না
আসক্তি পরিচালনা করতে সাহায্য করুন
✓ ঠিক আছে! মডিউল মডিউল পরিচালনা করতে সাহায্য করে

সারাংশ

পরবর্তী:

পরবর্তী টিউটোরিয়ালে AngularJS নির্দেশাবলী সম্পর্কে জানুন।